import React from 'react';
import { withRouter } from 'react-router';
import './style/wode.css';

const optionData = [
    {
        img: require('./img/index/xinshouzhiyin.png'),
        title: '新手指引',
        path: '/help'
    },
    {
        img: require('./img/index/tgzq.png'),
        title: '推广赚钱',
        path: '/inviteFriends'
    },
    {
        img: require('./img/index/huodongzhuanqu.png'),
        title: '活动专区',
        path: '/huodongzhuanqu'
    },
    {
        img: require('./img/index/youhuiquan.png'),
        title: '优惠券',
        path: '/youhuiquan'
    },
]


const optionData2 = [
    {
        img: require('./img/wode/icon2 (1).png'),
        title: '消息中心',
        path: '/message'
    },
    {
        img: require('./img/wode/icon2 (2).png'),
        title: '策略订单',
        path: "/heavyOrder"
    },
    {
        img: require('./img/wode/icon2 (3).png'),
        title: '期货订单',
        path: '/futureOrder'
    },
    {
        img: require('./img/wode/icon2 (4).png'),
        title: '我的账单',
        path: '/myBill'
    },
    {
        img: require('./img/wode/icon2 (5).png'),
        title: '我的银行',
        path: '/wodeyinhang'
    },
    {
        img: require('./img/wode/icon2 (7).png'),
        title: '客服中心',
        path: '/zhuanshukefu'
    },
]

class WoDe extends React.Component {
    jumpDetail(item) {
        if (item.title === '优惠券') {
            this.props.history.push({ pathname: item.path, state: { type: false } });
        } else {
            this.props.history.push({ pathname: item.path });
        }
    }
    //个人中心
    jumpInfo() {
        this.props.history.push({ pathname: '/gerenshezhi' })
    }
    //充值/体现
    jumpApply(index) {
        // eslint-disable-next-line default-case
        switch (index) {
            case 1:
                this.props.history.push({ pathname: '/chongzhi' })
                break
            case 2:
                this.props.history.push({ pathname: '/tixian' })
                break
        }
    }
    render() {
        return (
            <div className='wode'>
                <div className='navbar'>
                    <span>我的</span>
                    <span>退出</span>
                </div>
                <div className='info' onClick={() => this.jumpInfo()}>
                    <img src={require('./img/wode/touxiang.png')} alt=''></img>
                    <div className='left'>
                        <span>手机号：18672353468</span>
                        <span>交易账号：14513123</span>
                    </div>
                    <div className="shezhi">设置</div>
                </div>
                <div className='ye'>
                    <div className='item'>
                        <span>68000</span>
                        <span>总账户余额</span>
                    </div>
                    <img alt='' src={require('./img/wode/icon.png')} ></img>
                    <div className='item'>
                        <span>1000</span>
                        <span>交易账户余额</span>
                    </div>
                </div>
                <div className='scroll'>
                    <div className='btn'>
                        <span onClick={() => this.jumpApply(1)}>充值</span>
                        <span onClick={() => this.jumpApply(2)}>提现</span>
                    </div>
                    <div className='option'>
                        {
                            optionData && optionData.map((v, k) => {
                                return (
                                    <div key={v.k} className='item' key={k} onClick={() => this.jumpDetail(v)}>
                                        <img src={v.img} alt=''></img>
                                        <span>{v.title}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className='option2'>
                        {
                            optionData2 && optionData2.map((v, k) => {
                                return (
                                    <div className='item' key={v + k} onClick={() => this.jumpDetail(v)}>
                                        <div className='left'>
                                            <img src={v.img} alt=''></img>
                                            <span>{v.title}</span>
                                        </div>
                                        <img className='right' src={require('./img/wode/left.png')} alt=''></img>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        )
    }
}

export default withRouter(WoDe);